<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>生命周期 | 阿泽的笔记</title>
    <meta name="description" content="做一个努力的码农">
    <link rel="preload stylesheet" href="/assets/style.47519a3e.css" as="style">
    
    <script type="module" src="/assets/app.130cc073.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.cc795e4d.js">
    <link rel="modulepreload" href="/assets/chunks/theme.3ebce9b1.js">
    <link rel="modulepreload" href="/assets/tools_vue笔记.md.be570cd4.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/" data-v-86d1bed8><!--[--><!--]--><!----><!--[-->阿泽的笔记<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/case/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>案例</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tools/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>工具</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/adb%E5%91%BD%E4%BB%A4.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>adb命令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/arduino%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>arduino基础操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/cmd%20npm%20yarn%20pnpm%E5%91%BD%E4%BB%A4.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>cmd npm yarn pnpm命令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/elementUi%E7%AC%94%E8%AE%B0.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>elementUi笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/Emmet%20Web%E5%BF%AB%E9%80%9F%E6%9E%84%E5%BB%BA%E5%91%BD%E4%BB%A4.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Emmet Web快速构建命令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/git%E7%AC%94%E8%AE%B0.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>git笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/js%E7%9F%A5%E8%AF%86%E7%82%B9.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>js知识点</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/linux%E5%91%BD%E4%BB%A4.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>linux命令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/linux%E5%9F%9F%E5%90%8D%E9%85%8D%E7%BD%AE%E5%8F%8A%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>linux域名配置及反向代理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/mac%E4%BD%BF%E7%94%A8%E7%AC%94%E8%AE%B0.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>mac使用笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/mysql%E5%91%BD%E4%BB%A4.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>mysql命令</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/php%E5%9F%BA%E7%A1%80%E5%8F%8A%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>php基础及常用函数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/react.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>react</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/uniapp%E7%AC%94%E8%AE%B0.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>uniapp笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/vue%E7%AC%94%E8%AE%B0.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>vue笔记</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/tools/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端基础知识</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible collapsed" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>案例</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/css%E6%8A%80%E5%B7%A7.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>css技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/python%E8%87%AA%E5%8A%A8%E6%B5%8B%E8%AF%95%E8%84%9A%E6%9C%AC.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>python自动测试脚本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/uniapp%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>uniapp踩坑记录</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/vuex%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>vuex使用示例</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/vue%E5%85%AD%E7%A7%8Dl%E4%BC%A0%E8%BE%93%E6%96%B9%E5%BC%8F.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>vue六种l传输方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/vue%E5%AE%9E%E4%BE%8B%E6%8A%80%E5%B7%A7.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>vue实例技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/%E4%BC%98%E7%A7%80%E7%9A%84%E5%BC%80%E6%BA%90vue%E7%BB%84%E4%BB%B6.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>优秀的开源vue组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/%E5%89%8D%E7%AB%AF%E6%97%A5%E5%BF%97.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>前端日志</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/%E5%BC%80%E5%8F%91%E5%AF%8C%E6%96%87%E6%9C%AC%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>开发富文本本编辑器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8%E9%85%8D%E7%BD%AE.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>插件使用配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/%E6%A0%B7%E5%BC%8F%E5%B8%83%E5%B1%80.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>样式布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/case/%E8%BD%ACpdf%E7%9B%B8%E5%85%B3.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>转pdf相关</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _tools_vue%E7%AC%94%E8%AE%B0" data-v-6b87e69f><div><h1 id="生命周期" tabindex="-1">生命周期 <a class="header-anchor" href="#生命周期" aria-label="Permalink to &quot;生命周期&quot;">​</a></h1><ol><li>beforeCreate（创建前）</li><li>created （创建后）</li><li>beforeMount (载入前)</li><li>mounted （载入后）</li><li>beforeUpdate （更新前）</li><li>updated （更新后）</li><li>beforeDestroy（ 销毁前）</li><li>destroyed （销毁后）</li></ol><h1 id="基础命令" tabindex="-1">基础命令 <a class="header-anchor" href="#基础命令" aria-label="Permalink to &quot;基础命令&quot;">​</a></h1><h2 id="显示文本" tabindex="-1">显示文本 <a class="header-anchor" href="#显示文本" aria-label="Permalink to &quot;显示文本&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;p&gt;{{ message }}&lt;/p&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;p&gt;{{ message }}&lt;/p&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="_2-html输出文本" tabindex="-1">2. html输出文本 <a class="header-anchor" href="#_2-html输出文本" aria-label="Permalink to &quot;2. html输出文本&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">v-html=&quot;message&quot;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">v-html=&quot;message&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="_3-v-bind" tabindex="-1">3. v-bind <a class="header-anchor" href="#_3-v-bind" aria-label="Permalink to &quot;3. v-bind&quot;">​</a></h2><p>指令(简写为 :class=&quot;value&quot;)-</p><h3 id="动态绑定class" tabindex="-1">动态绑定class <a class="header-anchor" href="#动态绑定class" aria-label="Permalink to &quot;动态绑定class&quot;">​</a></h3><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">:class=&quot;{&#39;active&#39;:isActive==-1}&quot; </span></span>
<span class="line"><span style="color:#e1e4e8;">:class=&quot;{ &#39;active&#39;: isActive, &#39;sort&#39;: isSort }&quot;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">:class=&quot;{&#39;active&#39;:isActive==-1}&quot; </span></span>
<span class="line"><span style="color:#24292e;">:class=&quot;{ &#39;active&#39;: isActive, &#39;sort&#39;: isSort }&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="_4-v-if" tabindex="-1">4. v-if <a class="header-anchor" href="#_4-v-if" aria-label="Permalink to &quot;4. v-if&quot;">​</a></h2><p>指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素</p><h2 id="_5-v-for-遍历输出" tabindex="-1">5.v-for 遍历输出 <a class="header-anchor" href="#_5-v-for-遍历输出" aria-label="Permalink to &quot;5.v-for 遍历输出&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;li v-for=&quot;value in object&quot;&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;li v-for=&quot;(value, key) in object&quot;&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;li v-for=&quot;value in object&quot;&gt;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">&lt;li v-for=&quot;(value, key) in object&quot;&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="_6-修饰符" tabindex="-1">6. 修饰符 <a class="header-anchor" href="#_6-修饰符" aria-label="Permalink to &quot;6.  修饰符&quot;">​</a></h2><blockquote><p>是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：表示阻止提交</p></blockquote><h2 id="_7-v-model" tabindex="-1">7. v-model <a class="header-anchor" href="#_7-v-model" aria-label="Permalink to &quot;7.  v-model&quot;">​</a></h2><p>指令来实现双向数据绑定</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;div id=&quot;app&quot;&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">	&lt;p&gt;{{ message }}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">	</span></span>
<span class="line"><span style="color:#e1e4e8;">	&lt;input v-model=&quot;message&quot;&gt;     </span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">&gt;  v-model.number 限制数字类型</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;div id=&quot;app&quot;&gt;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">	&lt;p&gt;{{ message }}&lt;/p&gt;</span></span>
<span class="line"><span style="color:#24292e;">	</span></span>
<span class="line"><span style="color:#24292e;">	&lt;input v-model=&quot;message&quot;&gt;     </span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">&gt;  v-model.number 限制数字类型</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="_9-监听事件绑定-简写为-click-reversemessage" tabindex="-1">9. 监听事件绑定 (简写为 @click=&quot;reverseMessage&quot;)- <a class="header-anchor" href="#_9-监听事件绑定-简写为-click-reversemessage" aria-label="Permalink to &quot;9.  监听事件绑定 (简写为 @click=&quot;reverseMessage&quot;)-&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;button v-on:click=&quot;reverseMessage&quot;&gt;反转&lt;/button&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;button v-on:click=&quot;reverseMessage&quot;&gt;反转&lt;/button&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="计算属性" tabindex="-1">计算属性 <a class="header-anchor" href="#计算属性" aria-label="Permalink to &quot;计算属性&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">computed: {  </span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">    sums: function () {  </span></span>
<span class="line"><span style="color:#e1e4e8;">    </span></span>
<span class="line"><span style="color:#e1e4e8;">        var t=0,l=this.list; </span></span>
<span class="line"><span style="color:#e1e4e8;">    </span></span>
<span class="line"><span style="color:#e1e4e8;">        for(let i=0;i&lt;l.length;i++){ </span></span>
<span class="line"><span style="color:#e1e4e8;">            t+=Math.round((l[i].total)/(l[i].per)); </span></span>
<span class="line"><span style="color:#e1e4e8;">        } </span></span>
<span class="line"><span style="color:#e1e4e8;">        return t; </span></span>
<span class="line"><span style="color:#e1e4e8;">    }   </span></span>
<span class="line"><span style="color:#e1e4e8;">},</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">computed: {  </span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">    sums: function () {  </span></span>
<span class="line"><span style="color:#24292e;">    </span></span>
<span class="line"><span style="color:#24292e;">        var t=0,l=this.list; </span></span>
<span class="line"><span style="color:#24292e;">    </span></span>
<span class="line"><span style="color:#24292e;">        for(let i=0;i&lt;l.length;i++){ </span></span>
<span class="line"><span style="color:#24292e;">            t+=Math.round((l[i].total)/(l[i].per)); </span></span>
<span class="line"><span style="color:#24292e;">        } </span></span>
<span class="line"><span style="color:#24292e;">        return t; </span></span>
<span class="line"><span style="color:#24292e;">    }   </span></span>
<span class="line"><span style="color:#24292e;">},</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="_10-基本格式" tabindex="-1">10. 基本格式 <a class="header-anchor" href="#_10-基本格式" aria-label="Permalink to &quot;10. 基本格式&quot;">​</a></h2><pre><code>	new Vue({
		el: &#39;#app&#39;,
		data:{  
			message: &#39;我是你的爷爷&#39; 
		},
		watch: {
          firstName: {
            handler(newName, oldName) {
              this.fullName = newName + &#39; &#39; + this.lastName;
            },
            immediate:true
          }
        },
		methods:{
			reverseMessage:function(){
				this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
			}
		}
	}); 
&lt;/script&gt;
</code></pre><p>​</p><pre><code>&lt;!--  过滤值--&gt; 

	&lt;div id=&quot;app&quot;&gt;

		 &lt;h4&gt;0&lt;/h4&gt; 

	&lt;/div&gt; 

&lt;script&gt;

	new Vue({

		el: &#39;#app&#39;,

		data:{  

			message: &#39;aamone&#39; 

		}, 

		filters:{

			capitalize:function(value){

				return value.charAt(0).toUpperCase()+value.slice(1);

			}

		}

	}); 

&lt;/script&gt;
</code></pre><h2 id="_11-ajax提交-php取不到post解决方法" tabindex="-1">11. ajax提交(php取不到post解决方法) <a class="header-anchor" href="#_11-ajax提交-php取不到post解决方法" aria-label="Permalink to &quot;11. ajax提交(php取不到post解决方法)&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">axios({ method:&#39;get&#39;, url:&#39;user.json&#39; }).then(function(res){ console.log(res.data.name); });</span></span>
<span class="line"><span style="color:#e1e4e8;">axios.post(&#39;?c=pigaiwzx&amp;a=add&#39;,data).then(function(res){</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">   console.log(res.data)</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">});</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">axios({ method:&#39;get&#39;, url:&#39;user.json&#39; }).then(function(res){ console.log(res.data.name); });</span></span>
<span class="line"><span style="color:#24292e;">axios.post(&#39;?c=pigaiwzx&amp;a=add&#39;,data).then(function(res){</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">   console.log(res.data)</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="php取不到post数据处理" tabindex="-1">php取不到post数据处理 <a class="header-anchor" href="#php取不到post数据处理" aria-label="Permalink to &quot;php取不到post数据处理&quot;">​</a></h3><p>php可以用<code>file_get_contents(&quot;php://input&quot;)</code>或者</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">var params = new URLSearchParams();</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;"> params.append(&#39;username&#39;, &#39;admin&#39;);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">var params = new URLSearchParams();</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;"> params.append(&#39;username&#39;, &#39;admin&#39;);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="_12-使用createelement" tabindex="-1">12. 使用createElement <a class="header-anchor" href="#_12-使用createelement" aria-label="Permalink to &quot;12. 使用createElement&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">let message = h(</span></span>
<span class="line"><span style="color:#e1e4e8;">                &quot;p&quot;,</span></span>
<span class="line"><span style="color:#e1e4e8;">                {</span></span>
<span class="line"><span style="color:#e1e4e8;">                  style:&quot;&quot;, </span></span>
<span class="line"><span style="color:#e1e4e8;">                }, </span></span>
<span class="line"><span style="color:#e1e4e8;">                [ </span></span>
<span class="line"><span style="color:#e1e4e8;">                  h(&#39;strong&#39;,null,str + &#39;　&#39;),</span></span>
<span class="line"><span style="color:#e1e4e8;">                  h(</span></span>
<span class="line"><span style="color:#e1e4e8;">                    &quot;a&quot;,</span></span>
<span class="line"><span style="color:#e1e4e8;">                    {</span></span>
<span class="line"><span style="color:#e1e4e8;">                      style: &quot;color: #409EFF;cursor: pointer;&quot;,</span></span>
<span class="line"><span style="color:#e1e4e8;">                      on: {</span></span>
<span class="line"><span style="color:#e1e4e8;">                        click: this.showInfo,</span></span>
<span class="line"><span style="color:#e1e4e8;">                      },</span></span>
<span class="line"><span style="color:#e1e4e8;">                    },</span></span>
<span class="line"><span style="color:#e1e4e8;">                    &quot;查看明细&quot;</span></span>
<span class="line"><span style="color:#e1e4e8;">                  ),</span></span>
<span class="line"><span style="color:#e1e4e8;">                ]</span></span>
<span class="line"><span style="color:#e1e4e8;">              );</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">let message = h(</span></span>
<span class="line"><span style="color:#24292e;">                &quot;p&quot;,</span></span>
<span class="line"><span style="color:#24292e;">                {</span></span>
<span class="line"><span style="color:#24292e;">                  style:&quot;&quot;, </span></span>
<span class="line"><span style="color:#24292e;">                }, </span></span>
<span class="line"><span style="color:#24292e;">                [ </span></span>
<span class="line"><span style="color:#24292e;">                  h(&#39;strong&#39;,null,str + &#39;　&#39;),</span></span>
<span class="line"><span style="color:#24292e;">                  h(</span></span>
<span class="line"><span style="color:#24292e;">                    &quot;a&quot;,</span></span>
<span class="line"><span style="color:#24292e;">                    {</span></span>
<span class="line"><span style="color:#24292e;">                      style: &quot;color: #409EFF;cursor: pointer;&quot;,</span></span>
<span class="line"><span style="color:#24292e;">                      on: {</span></span>
<span class="line"><span style="color:#24292e;">                        click: this.showInfo,</span></span>
<span class="line"><span style="color:#24292e;">                      },</span></span>
<span class="line"><span style="color:#24292e;">                    },</span></span>
<span class="line"><span style="color:#24292e;">                    &quot;查看明细&quot;</span></span>
<span class="line"><span style="color:#24292e;">                  ),</span></span>
<span class="line"><span style="color:#24292e;">                ]</span></span>
<span class="line"><span style="color:#24292e;">              );</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><blockquote><p>详细介绍 <a href="https://juejin.cn/post/7030362678199582734" target="_blank" rel="noreferrer">Vue中 渲染函数（render）的介绍和应用 - 掘金 (juejin.cn)</a></p></blockquote><h2 id="常用方法" tabindex="-1">常用方法 <a class="header-anchor" href="#常用方法" aria-label="Permalink to &quot;常用方法&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;button class=&quot;cu-btn bg-green margin-left&quot; @tap=&quot;debounceFunc(true)&quot;&gt;立即发布&lt;/button&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">...</span></span>
<span class="line"><span style="color:#e1e4e8;">onLoad() {</span></span>
<span class="line"><span style="color:#e1e4e8;">		this.debounceFunc = this.$common.debounce(this.subFunc,1000);</span></span>
<span class="line"><span style="color:#e1e4e8;">		let rule = this.$store.getters.getRuleData;</span></span>
<span class="line"><span style="color:#e1e4e8;">		this.ruleCash = rule[1];</span></span>
<span class="line"><span style="color:#e1e4e8;">		this.getTodayPost();</span></span>
<span class="line"><span style="color:#e1e4e8;">	},</span></span>
<span class="line"><span style="color:#e1e4e8;">	...</span></span>
<span class="line"><span style="color:#e1e4e8;">//节流</span></span>
<span class="line"><span style="color:#e1e4e8;">	throttle(func,sec){</span></span>
<span class="line"><span style="color:#e1e4e8;">		let timer,now,last;  </span></span>
<span class="line"><span style="color:#e1e4e8;">		return function(){</span></span>
<span class="line"><span style="color:#e1e4e8;">			now = Date.now(); </span></span>
<span class="line"><span style="color:#e1e4e8;">			if(last &amp;&amp; now-last&lt;sec){</span></span>
<span class="line"><span style="color:#e1e4e8;">				clearTimeout(timer); </span></span>
<span class="line"><span style="color:#e1e4e8;">				timer = setTimeout(()=&gt;{</span></span>
<span class="line"><span style="color:#e1e4e8;">					last = now;</span></span>
<span class="line"><span style="color:#e1e4e8;">					func.call(this,...arguments);</span></span>
<span class="line"><span style="color:#e1e4e8;">				},sec)</span></span>
<span class="line"><span style="color:#e1e4e8;">			}else{</span></span>
<span class="line"><span style="color:#e1e4e8;">				last = now;</span></span>
<span class="line"><span style="color:#e1e4e8;">				func.call(this,...arguments);</span></span>
<span class="line"><span style="color:#e1e4e8;">			}</span></span>
<span class="line"><span style="color:#e1e4e8;">		}</span></span>
<span class="line"><span style="color:#e1e4e8;">		</span></span>
<span class="line"><span style="color:#e1e4e8;">	},</span></span>
<span class="line"><span style="color:#e1e4e8;">	//防抖</span></span>
<span class="line"><span style="color:#e1e4e8;">	debounce(func,sec=50){ </span></span>
<span class="line"><span style="color:#e1e4e8;">		let now,last=null;  </span></span>
<span class="line"><span style="color:#e1e4e8;">		return function(){  </span></span>
<span class="line"><span style="color:#e1e4e8;">			now = Date.now();</span></span>
<span class="line"><span style="color:#e1e4e8;">			if(last===null || now-last&gt;sec){  </span></span>
<span class="line"><span style="color:#e1e4e8;">				func.call(this,...arguments); </span></span>
<span class="line"><span style="color:#e1e4e8;">			} </span></span>
<span class="line"><span style="color:#e1e4e8;">			last = now;</span></span>
<span class="line"><span style="color:#e1e4e8;">		}</span></span>
<span class="line"><span style="color:#e1e4e8;">	},</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;button class=&quot;cu-btn bg-green margin-left&quot; @tap=&quot;debounceFunc(true)&quot;&gt;立即发布&lt;/button&gt;</span></span>
<span class="line"><span style="color:#24292e;">...</span></span>
<span class="line"><span style="color:#24292e;">onLoad() {</span></span>
<span class="line"><span style="color:#24292e;">		this.debounceFunc = this.$common.debounce(this.subFunc,1000);</span></span>
<span class="line"><span style="color:#24292e;">		let rule = this.$store.getters.getRuleData;</span></span>
<span class="line"><span style="color:#24292e;">		this.ruleCash = rule[1];</span></span>
<span class="line"><span style="color:#24292e;">		this.getTodayPost();</span></span>
<span class="line"><span style="color:#24292e;">	},</span></span>
<span class="line"><span style="color:#24292e;">	...</span></span>
<span class="line"><span style="color:#24292e;">//节流</span></span>
<span class="line"><span style="color:#24292e;">	throttle(func,sec){</span></span>
<span class="line"><span style="color:#24292e;">		let timer,now,last;  </span></span>
<span class="line"><span style="color:#24292e;">		return function(){</span></span>
<span class="line"><span style="color:#24292e;">			now = Date.now(); </span></span>
<span class="line"><span style="color:#24292e;">			if(last &amp;&amp; now-last&lt;sec){</span></span>
<span class="line"><span style="color:#24292e;">				clearTimeout(timer); </span></span>
<span class="line"><span style="color:#24292e;">				timer = setTimeout(()=&gt;{</span></span>
<span class="line"><span style="color:#24292e;">					last = now;</span></span>
<span class="line"><span style="color:#24292e;">					func.call(this,...arguments);</span></span>
<span class="line"><span style="color:#24292e;">				},sec)</span></span>
<span class="line"><span style="color:#24292e;">			}else{</span></span>
<span class="line"><span style="color:#24292e;">				last = now;</span></span>
<span class="line"><span style="color:#24292e;">				func.call(this,...arguments);</span></span>
<span class="line"><span style="color:#24292e;">			}</span></span>
<span class="line"><span style="color:#24292e;">		}</span></span>
<span class="line"><span style="color:#24292e;">		</span></span>
<span class="line"><span style="color:#24292e;">	},</span></span>
<span class="line"><span style="color:#24292e;">	//防抖</span></span>
<span class="line"><span style="color:#24292e;">	debounce(func,sec=50){ </span></span>
<span class="line"><span style="color:#24292e;">		let now,last=null;  </span></span>
<span class="line"><span style="color:#24292e;">		return function(){  </span></span>
<span class="line"><span style="color:#24292e;">			now = Date.now();</span></span>
<span class="line"><span style="color:#24292e;">			if(last===null || now-last&gt;sec){  </span></span>
<span class="line"><span style="color:#24292e;">				func.call(this,...arguments); </span></span>
<span class="line"><span style="color:#24292e;">			} </span></span>
<span class="line"><span style="color:#24292e;">			last = now;</span></span>
<span class="line"><span style="color:#24292e;">		}</span></span>
<span class="line"><span style="color:#24292e;">	},</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><h1 id="模块操作" tabindex="-1">模块操作 <a class="header-anchor" href="#模块操作" aria-label="Permalink to &quot;模块操作&quot;">​</a></h1><h2 id="store-vuex" tabindex="-1">store vuex <a class="header-anchor" href="#store-vuex" aria-label="Permalink to &quot;store vuex&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">this.$store.getters.getUserAuth</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">this.$store.commit(&#39;setRuleData&#39;, ruleData);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">this.$store.getters.getUserAuth</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">this.$store.commit(&#39;setRuleData&#39;, ruleData);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h1 id="其它操作" tabindex="-1">其它操作 <a class="header-anchor" href="#其它操作" aria-label="Permalink to &quot;其它操作&quot;">​</a></h1><h3 id="路由" tabindex="-1">路由 <a class="header-anchor" href="#路由" aria-label="Permalink to &quot;路由&quot;">​</a></h3><blockquote><p>路径转换 新窗口打开</p></blockquote><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;"> let routeData = this.$router.resolve({</span></span>
<span class="line"><span style="color:#e1e4e8;">	 path: url,</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;"> });</span></span>
<span class="line"><span style="color:#e1e4e8;"> window.open(routeData.href, &quot;_blank&quot;);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;"> let routeData = this.$router.resolve({</span></span>
<span class="line"><span style="color:#24292e;">	 path: url,</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;"> });</span></span>
<span class="line"><span style="color:#24292e;"> window.open(routeData.href, &quot;_blank&quot;);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="css操作" tabindex="-1">css操作 <a class="header-anchor" href="#css操作" aria-label="Permalink to &quot;css操作&quot;">​</a></h3><h4 id="引入css" tabindex="-1">引入css <a class="header-anchor" href="#引入css" aria-label="Permalink to &quot;引入css&quot;">​</a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">import&quot;@/assets/zane\_pc\_min.css&quot;; //@代表的是你的项目根路径</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;style scoped&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">@import &#39;../../assets/iconfont/iconfont.css&#39;;这个分号一定要写，要不会报错</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;/style&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">import&quot;@/assets/zane\_pc\_min.css&quot;; //@代表的是你的项目根路径</span></span>
<span class="line"><span style="color:#24292e;">&lt;style scoped&gt;</span></span>
<span class="line"><span style="color:#24292e;">@import &#39;../../assets/iconfont/iconfont.css&#39;;这个分号一定要写，要不会报错</span></span>
<span class="line"><span style="color:#24292e;">&lt;/style&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;style&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">  @import &#39;../../assets/iconfont/iconfont.css&#39;;这个分号一定要写，要不会报错</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;/style&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;style&gt;</span></span>
<span class="line"><span style="color:#24292e;">  @import &#39;../../assets/iconfont/iconfont.css&#39;;这个分号一定要写，要不会报错</span></span>
<span class="line"><span style="color:#24292e;">&lt;/style&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;style src=&quot;./download.scss&quot;  lang=&quot;scss&quot; scoped&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;style src=&quot;./download.scss&quot;  lang=&quot;scss&quot; scoped&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h4 id="只作用于本组件-及-深度选择器" tabindex="-1">只作用于本组件 及 深度选择器 <a class="header-anchor" href="#只作用于本组件-及-深度选择器" aria-label="Permalink to &quot;只作用于本组件 及 深度选择器&quot;">​</a></h4><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;style lang=&quot;scss&quot; scoped=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">.con-foot {</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">    height: 20px;</span></span>
<span class="line"><span style="color:#e1e4e8;">    </span></span>
<span class="line"><span style="color:#e1e4e8;">    background-color: #fff;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">}</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">//深度选择器 应用于父组件</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">::v-deep.el-select &gt;.el-input {</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">    width: 58px;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">}</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;/style&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">&lt;style lang=&quot;scss&quot; scoped=&quot;&quot;&gt;</span></span>
<span class="line"><span style="color:#24292e;">.con-foot {</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">    height: 20px;</span></span>
<span class="line"><span style="color:#24292e;">    </span></span>
<span class="line"><span style="color:#24292e;">    background-color: #fff;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">}</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">//深度选择器 应用于父组件</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">::v-deep.el-select &gt;.el-input {</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">    width: 58px;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">}</span></span>
<span class="line"><span style="color:#24292e;">&lt;/style&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="使用animate动画库" tabindex="-1">使用animate动画库 <a class="header-anchor" href="#使用animate动画库" aria-label="Permalink to &quot;使用animate动画库&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;transition</span></span>
<span class="line"><span style="color:#e1e4e8;">        enter-active-class=&quot;bounceInRight&quot;</span></span>
<span class="line"><span style="color:#e1e4e8;">        leave-active-class=&quot;fadeOut&quot;</span></span>
<span class="line"><span style="color:#e1e4e8;">      &gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">        &lt;p :class=&quot;[&#39;animated &#39;]&quot; v-if=&quot;show&quot;&gt;这是一个测试文字&lt;/p&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">      &lt;/transition&gt; </span></span>
<span class="line"><span style="color:#e1e4e8;">...</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;script&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">import &quot;@/assets/css/animate.min.css&quot;; //@代表的是你的项目根路径</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;transition</span></span>
<span class="line"><span style="color:#24292e;">        enter-active-class=&quot;bounceInRight&quot;</span></span>
<span class="line"><span style="color:#24292e;">        leave-active-class=&quot;fadeOut&quot;</span></span>
<span class="line"><span style="color:#24292e;">      &gt;</span></span>
<span class="line"><span style="color:#24292e;">        &lt;p :class=&quot;[&#39;animated &#39;]&quot; v-if=&quot;show&quot;&gt;这是一个测试文字&lt;/p&gt;</span></span>
<span class="line"><span style="color:#24292e;">      &lt;/transition&gt; </span></span>
<span class="line"><span style="color:#24292e;">...</span></span>
<span class="line"><span style="color:#24292e;">&lt;script&gt;</span></span>
<span class="line"><span style="color:#24292e;">import &quot;@/assets/css/animate.min.css&quot;; //@代表的是你的项目根路径</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h1 id="vue-cli-知识点" tabindex="-1">vue-cli 知识点 <a class="header-anchor" href="#vue-cli-知识点" aria-label="Permalink to &quot;vue-cli 知识点&quot;">​</a></h1><h4 id="切换npm源" tabindex="-1">切换npm源 <a class="header-anchor" href="#切换npm源" aria-label="Permalink to &quot;切换npm源&quot;">​</a></h4><h5 id="查看源" tabindex="-1">查看源 <a class="header-anchor" href="#查看源" aria-label="Permalink to &quot;查看源&quot;">​</a></h5><p><em>npm co</em>nfig get registry</p><h5 id="临时修改源" tabindex="-1">临时修改源 <a class="header-anchor" href="#临时修改源" aria-label="Permalink to &quot;临时修改源&quot;">​</a></h5><p>npm --registry <a href="https://registry.npm.taobao.org" target="_blank" rel="noreferrer">https://registry.npm.taobao.org</a> install express</p><h5 id="永久修改源" tabindex="-1">永久修改源 <a class="header-anchor" href="#永久修改源" aria-label="Permalink to &quot;永久修改源&quot;">​</a></h5><p><em>npm co</em>nfig set registry <a href="https://registry.npm.taobao.org" target="_blank" rel="noreferrer">https://registry.npm.taobao.org</a></p><h3 id="package-json中的版本控制" tabindex="-1">package.json中的版本控制 <a class="header-anchor" href="#package-json中的版本控制" aria-label="Permalink to &quot;package.json中的版本控制&quot;">​</a></h3><ol><li><code>npm version patch</code> package.json 中的版本号<code>2.0.0</code>变为 <code>2.0.1</code>;</li><li><code>npm version minor</code> package.json 中的版本号<code>2.0.1</code>变为 <code>2.1.0</code>;</li><li><code>npm version major</code> : <code>3.1.0</code> --&gt;<code>4.0.0</code></li></ol><h4 id="需要解决" tabindex="-1">需要解决 <a class="header-anchor" href="#需要解决" aria-label="Permalink to &quot;需要解决&quot;">​</a></h4><ol><li><p>父子互传（具体用法参考case里的vue的六种传值方式）</p></li><li><p>ajax封装</p></li><li><p>全局变量 使用p<wbr>rocess.env</p></li></ol><p>公共css 公共方法，通过include.js引用，然后在main.js引用</p><ol start="4"><li>跳转（下面有介绍，取值可参考参考case里的vue的六种传值方式）</li></ol><h4 id="route跳转" tabindex="-1">route跳转 <a class="header-anchor" href="#route跳转" aria-label="Permalink to &quot;route跳转&quot;">​</a></h4><p>1.最基本的跳转</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;router-link to=&quot;/demo1&quot;&gt;demo1:Hello,world&lt;/router-link&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;router-link to=&quot;/demo1&quot;&gt;demo1:Hello,world&lt;/router-link&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>2.带参数的基本跳转</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;router-link v-bind:to=&quot;{name:&#39;demo1&#39;,params:{userId:123}}&quot;&gt;跳转到demo1穿参123&lt;/router-link&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;router-link v-bind:to=&quot;{name:&#39;demo1&#39;,params:{userId:123}}&quot;&gt;跳转到demo1穿参123&lt;/router-link&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>此时，需要在index.js中的路由配置（path处）进行重新定义：写上包含的参数，当参数不固定时，需要在前面加上冒号，表示通配符。</p><p>{</p><pre><code>  path: &#39;/demo1/:userId&#39;,

  name: &#39;demo1&#39;,

  component: Demo1
</code></pre><p>},</p><p>3.通过query来定义地址栏键值对参数</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;router-link :to=&quot;{name:&#39;demo1&#39;,params:{userId:456},query:{plan:&#39;private&#39;,sex:&#39;male&#39;}}&quot;&gt;query&lt;/router-link&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;router-link :to=&quot;{name:&#39;demo1&#39;,params:{userId:456},query:{plan:&#39;private&#39;,sex:&#39;male&#39;}}&quot;&gt;query&lt;/router-link&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>4.通过js跳转</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;button @click=&quot;toURL&quot;&gt;跳转页面&lt;/button&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;script&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;"> toURL:function(){</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">            // this.$router.push({path:&#39;/demo2&#39;});</span></span>
<span class="line"><span style="color:#e1e4e8;">    </span></span>
<span class="line"><span style="color:#e1e4e8;">            this.$router.push({name:&#39;demo1&#39;,params:{userId:123},query:{plan:&quot;public&quot;,sex:&quot;female&quot;}});</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">}</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;/script&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;button @click=&quot;toURL&quot;&gt;跳转页面&lt;/button&gt;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">&lt;script&gt;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;"> toURL:function(){</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">            // this.$router.push({path:&#39;/demo2&#39;});</span></span>
<span class="line"><span style="color:#24292e;">    </span></span>
<span class="line"><span style="color:#24292e;">            this.$router.push({name:&#39;demo1&#39;,params:{userId:123},query:{plan:&quot;public&quot;,sex:&quot;female&quot;}});</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">}</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">&lt;/script&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h1 id="vue-cli问题积累" tabindex="-1">vue-cli问题积累 <a class="header-anchor" href="#vue-cli问题积累" aria-label="Permalink to &quot;vue-cli问题积累&quot;">​</a></h1><h2 id="_1-运行缓慢处理" tabindex="-1">1. 运行缓慢处理 <a class="header-anchor" href="#_1-运行缓慢处理" aria-label="Permalink to &quot;1. 运行缓慢处理&quot;">​</a></h2><blockquote><p>打config下的index.js 找到 productionSourceMap设为 false,</p></blockquote><h2 id="css限制样式" tabindex="-1">css限制样式 <a class="header-anchor" href="#css限制样式" aria-label="Permalink to &quot;css限制样式&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">&lt;style scoped&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">&lt;style scoped&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="vue上传文件" tabindex="-1">vue上传文件 <a class="header-anchor" href="#vue上传文件" aria-label="Permalink to &quot;vue上传文件&quot;">​</a></h2><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">  var formData = new FormData(); // new一个formData事件</span></span>
<span class="line"><span style="color:#e1e4e8;">  formData.append(&quot;file&quot;, imageFile);</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">  var formData = new FormData(); // new一个formData事件</span></span>
<span class="line"><span style="color:#24292e;">  formData.append(&quot;file&quot;, imageFile);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="分析依赖" tabindex="-1">分析依赖 <a class="header-anchor" href="#分析依赖" aria-label="Permalink to &quot;分析依赖&quot;">​</a></h3><p>npm run build -- --report</p><h3 id="运行时传参" tabindex="-1">运行时传参 <a class="header-anchor" href="#运行时传参" aria-label="Permalink to &quot;运行时传参&quot;">​</a></h3><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">npm run serve  -- --mode bit</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">npm run serve  -- --mode bit</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="打包优化" tabindex="-1">打包优化 <a class="header-anchor" href="#打包优化" aria-label="Permalink to &quot;打包优化&quot;">​</a></h3><ol><li><p>路由改为按需加载</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">const Login = () =&gt; import(``&#39;@/views/Login&#39;``)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">const Login = () =&gt; import(``&#39;@/views/Login&#39;``)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></li><li><p>全用cdn</p><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">//vue.config.js</span></span>
<span class="line"><span style="color:#e1e4e8;">config.externals = {</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">   &#39;vue&#39;:&#39;Vue&#39;,</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">   &#39;element-ui&#39;:&#39;ELEMENT&#39;,</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">   &#39;axios&#39;:&#39;axios&#39;,</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">   &#39;echarts&#39;: &#39;echarts&#39;</span></span>
<span class="line"><span style="color:#e1e4e8;"></span></span>
<span class="line"><span style="color:#e1e4e8;">  };</span></span>
<span class="line"><span style="color:#e1e4e8;">  </span></span>
<span class="line"><span style="color:#e1e4e8;">  //public/index.html</span></span>
<span class="line"><span style="color:#e1e4e8;">    &lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/axios.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">  &lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/echarts.common.min.js&quot;&gt;&lt;/script&gt; </span></span>
<span class="line"><span style="color:#e1e4e8;">  &lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/vue.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;%= BASE_URL %&gt;/lib/element/lib/theme-chalk/index.css&quot;&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;!-- 引入组件库 --&gt;</span></span>
<span class="line"><span style="color:#e1e4e8;">&lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/element/lib/index.js&quot;&gt;&lt;/script&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">//vue.config.js</span></span>
<span class="line"><span style="color:#24292e;">config.externals = {</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">   &#39;vue&#39;:&#39;Vue&#39;,</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">   &#39;element-ui&#39;:&#39;ELEMENT&#39;,</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">   &#39;axios&#39;:&#39;axios&#39;,</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">   &#39;echarts&#39;: &#39;echarts&#39;</span></span>
<span class="line"><span style="color:#24292e;"></span></span>
<span class="line"><span style="color:#24292e;">  };</span></span>
<span class="line"><span style="color:#24292e;">  </span></span>
<span class="line"><span style="color:#24292e;">  //public/index.html</span></span>
<span class="line"><span style="color:#24292e;">    &lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/axios.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#24292e;">  &lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/echarts.common.min.js&quot;&gt;&lt;/script&gt; </span></span>
<span class="line"><span style="color:#24292e;">  &lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/vue.min.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#24292e;">&lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;%= BASE_URL %&gt;/lib/element/lib/theme-chalk/index.css&quot;&gt;</span></span>
<span class="line"><span style="color:#24292e;">&lt;!-- 引入组件库 --&gt;</span></span>
<span class="line"><span style="color:#24292e;">&lt;script src=&quot;&lt;%= BASE_URL %&gt;/lib/element/lib/index.js&quot;&gt;&lt;/script&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><ol start="3"><li>减少依赖</li></ol></li></ol><p>​</p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><!----><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/tools/uniapp%E7%AC%94%E8%AE%B0.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Previous page</span><span class="title" data-v-ef5dee53>uniapp笔记</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/tools/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>前端基础知识</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"case_getaccesstoken.md\":\"67a16083\",\"case_前端日志.md\":\"270996e6\",\"case_前端防切屏.md\":\"6d67367b\",\"ai学习笔记_个人理解.md\":\"62e8b40f\",\"case_vue实例技巧.md\":\"75787181\",\"日志_关于企业站的seo.md\":\"496419f4\",\"case_插件使用配置.md\":\"fe83b1c1\",\"办公_版本处理方案.md\":\"e749eb0e\",\"办公_开发记录.md\":\"437c4662\",\"case_mac使用.md\":\"48c33f34\",\"办公_app开通微信支付.md\":\"95c825d6\",\"tools_arduino基础操作.md\":\"f997fb69\",\"日志_uniapp内存泄漏事件.md\":\"25a76630\",\"case_ios上架笔记.md\":\"84d52929\",\"case_开发富文本本编辑器.md\":\"d7842807\",\"办公_ebm后端及数据库笔记.md\":\"0c19b5f3\",\"case_uniapp踩坑记录.md\":\"4e47ad2a\",\"tools_conda命令  pip命令.md\":\"23ac8380\",\"办公_待解决问题.md\":\"dcc132f1\",\"case_优秀的开源vue组件.md\":\"6020f82e\",\"case_样式布局.md\":\"670153be\",\"tools_emmet web快速构建命令.md\":\"02ded381\",\"ai学习笔记_二、应用场景.md\":\"3985787b\",\"java笔记_程序基础.md\":\"750d7bf5\",\"日志_合格的文档.md\":\"e2dd10c4\",\"tools_index.md\":\"8efae136\",\"tools_设计规范.md\":\"c1e5222d\",\"case_转pdf相关.md\":\"9b047234\",\"case_vuex使用示例.md\":\"042f3339\",\"tools_elementui笔记.md\":\"d727814f\",\"办公_应用中心框架更新.md\":\"9124a7e9\",\"ai学习笔记_一、概念.md\":\"960b8e6d\",\"case_markdown文件转换目录列表.md\":\"f04a5805\",\"tools_cmd npm yarn pnpm命令.md\":\"deebc540\",\"case_css技巧.md\":\"cedd6cee\",\"ai学习笔记_四、模型.md\":\"f9d2ec81\",\"办公_代码示例_l律所起诉状.md\":\"f875bace\",\"tools_adb命令.md\":\"9831c553\",\"tools_命名汇总推荐.md\":\"3bf819e1\",\"办公_seo方案.md\":\"22a7e45f\",\"java笔记_面向对象编程.md\":\"486db2ad\",\"日志_测试笔记.md\":\"00dcc692\",\"case_python自动测试脚本.md\":\"bec8212a\",\"index.md\":\"25642d62\",\"tools_mac使用笔记.md\":\"9ee5b2a6\",\"办公_实施笔记.md\":\"10ecc800\",\"tools_vue笔记.md\":\"be570cd4\",\"ai学习笔记_五、模型发展.md\":\"a9feb551\",\"case_vue六种l传输方式.md\":\"cadce3ad\",\"case_index.md\":\"4370ee15\",\"ai学习笔记_六、开发.md\":\"0b1a367a\",\"tools_前端基础知识.md\":\"864e9786\",\"ai学习笔记_三、promt工程.md\":\"1b5a7f7c\",\"办公_todo.md\":\"2ccf3c97\",\"日志_前端自检项.md\":\"0544de55\",\"case_基础csss样式.md\":\"d368d629\",\"tools_react.md\":\"d032d22f\",\"case_数字化大屏问题点.md\":\"e37019d4\",\"tools_php基础及常用函数.md\":\"b2afeccf\",\"case_flutter安装配置.md\":\"ccbc694e\",\"tools_js知识点.md\":\"51436346\",\"case_富文本编辑器原理.md\":\"f3b0b2ee\",\"tools_mysql命令.md\":\"373a1b6c\",\"tools_linux命令.md\":\"82c20701\",\"办公_前端常用代码.md\":\"8923abd6\",\"tools_jquery的使用.md\":\"e9d67fbd\",\"tools_docker使用.md\":\"1ea0c513\",\"tools_uniapp笔记.md\":\"c0a178f5\",\"tools_git笔记.md\":\"9870fad6\",\"日志_自媒体笔记.md\":\"0d283ba7\",\"tools_linux域名配置及反向代理.md\":\"25492670\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"阿泽的笔记\",\"description\":\"做一个努力的码农\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"displayAllHeaders\":true,\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"案例\",\"link\":\"/case/\"},{\"text\":\"工具\",\"link\":\"/tools/\"}],\"sidebar\":[{\"text\":\"工具\",\"collapsible\":true,\"collapsed\":true,\"items\":[{\"text\":\"adb命令\",\"link\":\"/tools/adb命令\"},{\"text\":\"arduino基础操作\",\"link\":\"/tools/arduino基础操作\"},{\"text\":\"cmd npm yarn pnpm命令\",\"link\":\"/tools/cmd npm yarn pnpm命令\"},{\"text\":\"elementUi笔记\",\"link\":\"/tools/elementUi笔记\"},{\"text\":\"Emmet Web快速构建命令\",\"link\":\"/tools/Emmet%20Web快速构建命令\"},{\"text\":\"git笔记\",\"link\":\"/tools/git笔记\"},{\"text\":\"js知识点\",\"link\":\"/tools/js知识点\"},{\"text\":\"linux命令\",\"link\":\"/tools/linux命令\"},{\"text\":\"linux域名配置及反向代理\",\"link\":\"/tools/linux域名配置及反向代理\"},{\"text\":\"mac使用笔记\",\"link\":\"/tools/mac使用笔记\"},{\"text\":\"mysql命令\",\"link\":\"/tools/mysql命令\"},{\"text\":\"php基础及常用函数\",\"link\":\"/tools/php基础及常用函数\"},{\"text\":\"react\",\"link\":\"/tools/react\"},{\"text\":\"uniapp笔记\",\"link\":\"/tools/uniapp笔记\"},{\"text\":\"vue笔记\",\"link\":\"/tools/vue笔记\"},{\"text\":\"前端基础知识\",\"link\":\"/tools/前端基础知识\"}]},{\"text\":\"案例\",\"collapsible\":true,\"collapsed\":true,\"items\":[{\"text\":\"css技巧\",\"link\":\"/case/css技巧\"},{\"text\":\"python自动测试脚本\",\"link\":\"/case/python自动测试脚本\"},{\"text\":\"uniapp踩坑记录\",\"link\":\"/case/uniapp踩坑记录\"},{\"text\":\"vuex使用示例\",\"link\":\"/case/vuex使用示例\"},{\"text\":\"vue六种l传输方式\",\"link\":\"/case/vue六种l传输方式\"},{\"text\":\"vue实例技巧\",\"link\":\"/case/vue实例技巧\"},{\"text\":\"优秀的开源vue组件\",\"link\":\"/case/优秀的开源vue组件\"},{\"text\":\"前端日志\",\"link\":\"/case/前端日志\"},{\"text\":\"开发富文本本编辑器\",\"link\":\"/case/开发富文本本编辑器\"},{\"text\":\"插件使用配置\",\"link\":\"/case/插件使用配置\"},{\"text\":\"样式布局\",\"link\":\"/case/样式布局\"},{\"text\":\"转pdf相关\",\"link\":\"/case/转pdf相关\"}]}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>